<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { postLoginAPI } from '@/services/login'
import { useMemberStore } from '@/stores'

// 登录状态
const loading = ref(false)
// 是否显示遮罩层
const showOverlay = ref(false)
let code = '' //微信登录凭证

// 获取手机号
const onGetPhoneNumber = async (e: any) => {
  // 用户拒绝授权
  if (e.detail.errMsg !== 'getPhoneNumber:ok') {
    uni.showToast({
      title: '获取手机号失败',
      icon: 'none',
    })
    return
  }

  // 获取到加密的手机号数据
  const { encryptedData, iv } = e.detail

  try {
    // 先显示加载状态和遮罩层，防止闪烁
    loading.value = true
    showOverlay.value = true

    // 调用登录API
    const res = await postLoginAPI({
      code,
      encryptedData,
      iv,
    })

    // 将用户数据保存到store中
    const memeberStore = useMemberStore()
    memeberStore.setProfile(res.data)

    // 直接显示加载提示，隐藏原有的按钮
    uni.showLoading({
      title: '登录成功',
      mask: true,
    })

    // 延迟跳转，保持遮罩层显示
    setTimeout(() => {
      // 关闭加载提示
      uni.hideLoading()

      // 直接跳转，不使用 Toast，减少状态变化
      uni.switchTab({
        url: '/pages/index/index',
      })
    }, 800)
  } catch (error) {
    console.error('登录失败:', error)
    // 登录失败时关闭遮罩，显示错误提示
    showOverlay.value = false
    loading.value = false

    uni.showToast({
      title: '登录失败，请重试',
      icon: 'none',
    })
  }
}

// 其他登录方式
const handleOtherLogin = () => {
  // TODO: 实现其他登录方式
  uni.showToast({
    title: '功能开发中',
    icon: 'none',
  })
}

//页面加载
onLoad(async () => {
  try {
    // 使用uni-app API获取登录凭证
    uni.login({
      provider: 'weixin',
      success: (res) => {
        code = res.code //获取微信登录凭证
        console.log('登录凭证:', code)
      },
      fail: (err) => {
        console.error('获取登录凭证失败:', err)
      },
    })
  } catch (error) {
    console.error('登录异常:', error)
  }
})
</script>

<template>
  <view class="login-container">
    <!-- 全屏遮罩层，防止闪烁 -->
    <view v-if="showOverlay" class="full-overlay"></view>

    <!-- 顶部品牌展示 -->
    <view class="header">
      <view class="logo">爱心小屋</view>
      <view class="slogan">互助·共享·爱心</view>
    </view>

    <!-- 登录表单 -->
    <view class="form-card">
      <view class="welcome-text">欢迎使用爱心小屋</view>

      <button
        class="wechat-phone-btn"
        open-type="getPhoneNumber"
        @getphonenumber="onGetPhoneNumber"
        :loading="loading"
        :disabled="loading"
      >
        <text class="iconfont icon-weixin"></text>
        微信手机号快捷登录
      </button>

      <view class="divider">
        <view class="line"></view>
        <view class="text">或</view>
        <view class="line"></view>
      </view>

      <button class="other-login-btn" @click="handleOtherLogin">其他方式登录</button>

      <view class="tips">登录即表示您已同意《用户协议》和《隐私政策》</view>
    </view>
  </view>
</template>

<style lang="scss">
.login-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative; /* 添加相对定位 */
}

/* 全屏遮罩层 */
.full-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5; /* 与页面背景一致 */
  z-index: 9998; /* 高层级 */
}

.header {
  margin-top: 100rpx;
  margin-bottom: 80rpx;
  text-align: center;

  .logo {
    font-size: 56rpx;
    font-weight: bold;
    color: #2979ff;
    margin-bottom: 20rpx;
  }

  .slogan {
    font-size: 28rpx;
    color: #666;
  }
}

.form-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  z-index: 1; /* 确保表单在遮罩上方 */
}

.welcome-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 60rpx;
}

.wechat-phone-btn {
  background: #07c160;
  height: 90rpx;
  border-radius: 45rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;

  .iconfont {
    margin-right: 10rpx;
  }
}

.divider {
  display: flex;
  align-items: center;
  margin: 40rpx 0;

  .line {
    flex: 1;
    height: 1px;
    background-color: #eee;
  }

  .text {
    padding: 0 20rpx;
    font-size: 24rpx;
    color: #999;
  }
}

.other-login-btn {
  background: #f5f5f5;
  height: 90rpx;
  border-radius: 45rpx;
  color: #333;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
}

.tips {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  margin-top: 30rpx;
}
</style>
